import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import myaxios from "../../untils/myaxios"
import { NavBar } from 'antd-mobile';
import "./Category.scss"
import SearchInput from "../searchInput/SearchInput"

class Category extends Component {
    state = {
        categories: [],//返回所有商品数据
        selected_id: 0,//一级菜单选中项
        categoryList: [],//二级菜单内容
    }
    // 获取所有商品数据
    getCategories = () => {
        myaxios.get("categories").then(res => {
            this.setCategories(res)
        }).catch(err => {
            console.log(err)
        })
    }
    // 设置分类菜单的数据
    setCategories = (res, is_stored) => {
        // 缓存请求的数据
        let categories_cache = {};
        //is_stored 是否已有缓存
        if (is_stored) {
            // 直接获取本地缓存中的数据即可
            categories_cache = JSON.parse(localStorage.getItem("categories_cache"));
        } else {
            categories_cache = {date: Date.now(), categories: res };
        }
        // 缓存到本地中
        localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
        this.setState({
            categories: res,
            categoryList: res[this.state.selected_id].children
        })
    }
    componentDidMount() {
        // 获取本地缓存
        let categories_cache = localStorage.getItem("categories_cache");
        // 是否有本地缓存
        if (categories_cache) {
            // 判断本地缓存是否过期
            // 当前时间
            let current_time = Date.now();
            // 存储的时间
            let storage_time = JSON.parse(categories_cache).date;
            if (current_time - storage_time > 1000 * 60 * 60) {//1小时的过期时间
                //过期
                this.getCategories();
            }else{
                //未过期
                this.setCategories(JSON.parse(categories_cache).categories,true);
            }
        } else {//无
            this.getCategories()
        }
    }
    // 点击左边一级标题
    handleLeftItemClick = (e) => {
        let selected_id = parseInt(e.target.getAttribute("dataType"));
        this.setState({
            selected_id,
            categoryList: this.state.categories[selected_id].children
        })
    }
    // 点击右边商品进入商品列表
    handleRightItemClick=(e)=>{
        let query=e.target.getAttribute("dataType");
       this.props.history.push("/goodList/"+query);
    }

    render() {
        return (
            <div className="wx-category">
                {/* 分类头部开始 */}
                <div className="wx-category-head">
                    <NavBar className="category-nav-head">商品分类</NavBar>
                </div>
                {/* 分类头部结束 */}
                {/* 搜索按钮开始 */}
                <SearchInput></SearchInput>
                {/* 搜索按钮结束*/}
                {/* 分类内容开始 */}
                <div className="category-content">
                    {/* 左边菜单栏开始 */}
                    <div className="category-content-left" onClick={this.handleLeftItemClick}>
                        {this.state.categories.map((v, i) => {
                            return <div className={this.state.selected_id === i ? "active content-left-item" : "content-left-item"} key={v.cat_id} datatype={i}>{v.cat_name}</div>
                        })}
                    </div>
                    {/* 左边菜单栏结束 */}
                    {/* 右边菜单栏开始 */}
                    <div className="category-content-right">
                        {this.state.categoryList.map((v, i) => {
                            return <div className="content-right-item" key={v.cat_id}>
                                {/* 二级菜单标题开始 */}
                                <div className="right-item-title">/{v.cat_name}/</div>
                                {/* 二级菜单标题结束 */}
                                {/* 商品列表开始(三级菜单) */}
                                <div className="right-item-goods">
                                    {v.children && v.children.map((vv, index) => {
                                        return <div className="right-item-img" key={vv.cat_id} onClick={this.handleRightItemClick}>
                                            <img src={vv.cat_icon} datatype={vv.cat_id} alt="" />
                                            <span>{vv.cat_name}</span>
                                        </div>
                                    })}
                                </div>
                                {/* 商品列表结束(三级菜单) */}
                            </div>
                        })}
                    </div>
                    {/* 右边菜单栏结束 */}
                </div>
                {/* 分类内容结束 */}
            </div>
        );
    }
}

export default withRouter(Category);
